<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SopraIM</title>
        <!-- jquery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            
        <!-- Sopra IM connection -->
        <link rel=stylesheet type="text/css" href="inc/css/connection.css" />
        <script src="inc/js/connection.js"></script>
            
    </head>
    <body>
        <div id="wrapper"><div id="cell">
                <div id="formDiv">
                    <img src="<c:url value="/inc/img/sopra.jpg"/>" alt="logo" 
                         class="unselectable"/>
                    <form id="connectionForm" method="POST">
                        <input type="text" name="username" 
                               placeholder="Username" required="required"
                               value="" />
                                   
                        <input type="password" name="password" 
                               placeholder="Password" required="required" 
                               value="" />
                                   
                        <input type="submit" value="Connect"/>
                            
                    </form>
                    <c:if test="${errors != null}" >
                        <p id="connect_errors"> <c:out value="${errors}"/></p>    
                    </c:if> 
                    <div id="loading-indicator">
                        <img id="loading" src="inc/img/ajax-loader-circle.gif" alt="loading...">
                    </div>
                </div>
                    
            </div>             
        </div>
    </body>
</html>